<template>
	<div class="chinaMap" ref='chinaMap'>
		<div ref="chinaMapChart" class="chinaMapChart" style="width: 100%;height: 100%;"></div>
	</div>

</template>

<script>
	const chinaCoordData = require('@/assets/js/chinaGeoCoordMap.json')
	export default {
		name: 'chinaMap',
		components: {

		},
		data() {
			return {
				//加载中国地图
				ChinaChina: null,
				geoCoordMapChina: chinaCoordData,
				getChinaProvData: [],
			}
		},
		mounted() {

			var that = this;
			that.initChinaChart();
			// setInterval(function() {
			//   that.initChinaChart();
			// }, 30000)
		},
		methods: {
			initChinaChart() {
			  var that = this;
			  const mainMap = that.$refs.chinaMapChart;
			  if(mainMap){
				  that.ChinaChina = that.$echarts.init(mainMap);
				  that.$myHttp.post("getChinaProvInfo")
				    .then(function(data0) {
				      if (data0.status == "200") {
				        // console.log(data0.data.hn_buyarea_sf)
				        // if (data0.data.hn_buyarea_sf.length > 10) {
				        //   that.getChinaProvData = data0.data.hn_buyarea_sf.slice(0, 10);
				        // } else {
				        //   that.getChinaProvData = data0.data.hn_buyarea_sf;
				        // }
								if( data0.data.hn_buyarea_sf&& data0.data.hn_buyarea_sf.length>0){
										that.getChinaProvData =  data0.data.hn_buyarea_sf;
										//存：
										localStorage.setItem('getChinaProvData',JSON.stringify(that.getChinaProvData));
										
								}else{
									//取：
									 that.getChinaProvData  = JSON.parse(localStorage.getItem('getChinaProvData'))||[];
								}
				        // that.getChinaProvData = data0.data.hn_buyarea_sf;
				        var worldName = [];
				        var hnData = [];
				        var geoCoordMap = {};
						if(that.getChinaProvData.length>0){
							that.getChinaProvData.forEach((item, index) => {
							  if(item.PROVINCE=="新疆"||item.PROVINCE=="河南"||item.PROVINCE=="广西"||item.PROVINCE=="黑龙江"||item.PROVINCE=="吉林"||item.PROVINCE=="青海"||item.PROVINCE=="西藏"||item.PROVINCE=="云南"||item.PROVINCE=="四川"||item.PROVINCE=="上海"||item.PROVINCE=="广东"||item.PROVINCE=="北京"||item.PROVINCE=="山东"||item.PROVINCE=="福建"||item.PROVINCE=="湖北"||item.PROVINCE=="湖南"||item.PROVINCE=="宁夏"||item.PROVINCE=="内蒙古"||item.PROVINCE=="四川"){
							    worldName.push(item.PROVINCE);
							    hnData.push([{
							      name: '河南',
							    }, {
							      name: item.PROVINCE,
							      value: item.DANLIANG
							    }])
							  }
							})
						}
				        
				        worldName.forEach((item, index) => {
				          geoCoordMap[item] = [];
				          geoCoordMap[item][0] = that.geoCoordMapChina[item][0]
				          geoCoordMap[item][1] = that.geoCoordMapChina[item][1]
				        })
				  			
				        var convertData = function(data) {
				          const res = [];
				          for (let i = 0; i < data.length; i++) {
				            const dataItem = data[i];
				            const fromCoord = geoCoordMap[dataItem[0].name];
				            const toCoord = geoCoordMap[dataItem[1].name];
				            if (fromCoord && toCoord) {
				              res.push({
				                fromName: dataItem[0].name,
				                toName: dataItem[1].name,
				                coords: [fromCoord, toCoord]
				              });
				            }
				          }
				          return res;
				        }
						
						
				  			
				        const color = ["#f9cb41", "#f9cb41", "#46bee9"];
				        const planePath =
				          "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
									
									 
				        const series = [];
				        var regions = [];
				        // var color=['#fdfda8', '#00aefd ', '#f3d034', '#5f48ff', '#09d478', '#ae3ee2','#ff8d28 ','#4ff1fb'];
				        // var color = ['rgba(253,253,168,.8)', 'rgba(0,174,253,.8) ', 'rgba(243,208,52,.8)', 'rgba(95,72,255,.8)',
				        //   'rgba(9,212,120,.8)', 'rgba(174,62,226,.8)', 'rgba(255,141,40,.8)', 'rgba(79,241,2,.8)'
				        // ];
				        [
				          ["河南", hnData]
				        ].forEach((item, i) => {
							// console.log(item)
				          item[1].map((dataItem, index) => {
				            if (dataItem[1].name == "河南") {
				              regions.push({
				                name: dataItem[1].name,
				                selected: false,
				                itemStyle: {
				                  // areaColor: '#47f7f4',
								  // areaColor: 'rgba(299,194,0,.9)',
								  // borderColor: '#fff' ,
								  // borderWidth: 2 ,
								  // shadowBlur: 25,
								  // shadowColor:'#fff',
								  // shadowOffsetX :0,
								  // shadowOffsetY :0,
				                }
				              })
				            }
				          })
				          // console.log(regions)
						  // console.log(convertData(item[1]).length)
						  // console.log()
				          series.push(
						  {
				            name: item[0],
				            type: "lines",
				            zlevel: 1,
				            effect: {
				              show: true,
				              period: 5,
							  delay:function(value){
								  if(value==0){
									  return 0 ;
								  }
								  var max = 5000;
								  var min = 0;
								  var num = parseInt(Math.random()*(max-min+1)+min,10);
								  return value*num ;
								  // console.log(num)
							  },
				              trailLength: 0.3,
				              color: "#fff",
				              symbolSize: 4
				            },
				            lineStyle: {
				              normal: {
				                color: color[i],
				                width: 0,
				                curveness: 0.2
				              }
				            },
				            data: convertData(item[1])
				          }, 
						  {
				            name: item[0],
				            type: "lines",
				            zlevel: 2,
				            symbol: ["none", "arrow"],
				            effect: {
				              show: true,
				              period: 2,
				              trailLength: 0,
				              // symbol: planePath,
				              symbol: 'none',
				              symbolSize: 2
				            },
				  			
				            lineStyle: {
				              normal: {
				                color: color[i],
				                width: 1,
				                opacity: 0.6,
				                curveness: 0.2
				              }
				            },
				            data: convertData(item[1])
				          }, {
				            name: item[0],
				            type: "effectScatter",
				            coordinateSystem: "geo",
				            zlevel: 2,
				            rippleEffect: {
				              brushType: "stroke",
				              period: 2
				            },
				            label: {
				              normal: {
				                show: true,
				                position: "right",
				                backgroundColor: 'transparent', //  #2dfdfd
				                borderColor: 'transparent',
				                borderWidth: 0,
				                borderRadius: 0,
				                offset: [0, 0],
				                // formatter:"{b}",
								formatter:function(prames){
									// console.log(prames)
									if(prames.name=="河南"){
										return "{name|郑州}"
									}else{
										return  "{name|"+ prames.name +"}"
									}
								},
				                rich: {
				                  name: {
				                    color: '#Fdd000',
				                    align: 'center',
				                    fontWeight: 'bold',
				                    fontSize: that.commonFunction.fontSize(0.14),
				  			
				                  },
				  			
				                }
				              }
				            },
				            // symbolSize: 6,
							symbolSize: function(value,prames){
								// console.log(value,prames)
								if(prames.name=="河南"){
									return 20
								}else{
									return 6
								}
							},
				            symbol: "circle",
				            itemStyle: {
				              normal: {
				                color: color[i]
				              }
				            },
				            data: item[1].map(dataItem => {
				              return {
				                name: dataItem[1].name,
				                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
				              };
				            })
				          });
				        });
				  			
				  			
				        const option = {
				          title: {
				            // text: '保税跨境1210进口实时动态图',
				            // left: 'center',
				            // textStyle: {
				            //   color: "#fff",
				            //   fontWeight: "normal",
				            //   fontSize: that.commonFunction.fontSize(0.28),
				            //   lineHeight:that.commonFunction.fontSize(1.2),
				            // }
				          },
				          tooltip: {
				            trigger: "item"
				          },
				          grid: {
				            left: '0',
				            right: '0',
				            bottom: '2%',
				            containLabel: true
				          },
				          geo: {
				            map: "china",
				            label: {
				              emphasis: {
				                show: false
				              }
				            },
				            aspectScale:.75,
				            roam: false, //是否允许缩放
				            layoutCenter: ["50%", "60%"], //地图位置
				            layoutSize:that.commonFunction.fontSize(7),
				            itemStyle: {
				              normal: {
				                // areaColor: "rgba(18,121,213,.5)", //地图背景色的更改transparent
				                // borderColor: 'rgba(45,150,240,1)',
				                // color: 'rgba(18,123,214,.4)', //地图背景色
								color: 'rgba(36,179,198,.5)', //地图背景色
				                // color: {
				                //   image: that.$refs.imgClass, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
				                //   repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
				                // },
				                // areaColor: {
				                //   x: 0,
				                //   y: 0,
				                //   x2: 0,
				                //   y2: 1,
				                //   colorStops: [{
				                //     offset: 0,
				                //     color: '#073684' // 0% 处的颜色
				                //   }, {
				                //     offset: 1,
				                //     color: '#061E3D' // 100% 处的颜色
				                //   }],
				                // },
				                // borderColor: "#5bc1c9", //省市边界线
								borderColor: "#0effeb", //省市边界线
				                borderWidth: 1,
				                //            borderColor: "#404a59"
				                areaStyle: {
				                  // color: '#ffffff', //默认的地图板块颜色
				                },
				              },
				              emphasis: {
				                show: false,
				                areaColor: 'transparent', //鼠标滑过区域颜色
				              },
				  			
				            },
				            regions: regions,//绑定些数据的特定的样式
				  			
				          },
				          series: series
				        };
				        
				        that.ChinaChina.setOption(option);
				        window.addEventListener("resize", function() {
				          that.ChinaChina.resize()
				        })
				  			
				      } else {
				        alert("数据请求错误")
				      }
				  			
				    })
				    .catch(function(error) {
				      // alert(error)
				    })
			  }
			  
			 
			
			},
			
		}
	}
</script>

<style scoped>
	.chinaMap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.chinaMapChart {
		width: 100%;
		height: 100%;
		/* background: url(../../../../static/img/map.png) no-repeat center center;
		background-size: 100% 100%; */
		
	}
</style>
